<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			#progressbar{
				width:180px;
				height:20px;
				border:1px solid darkgray;
			}
			#fill{
				background-color:green;
			}
		</style>
	</head>
	<body>
		<!--进度条容器-->
		<div id="progressbar">
			<!--用来模仿进度条推进效果的进度条元素-->
			<div id="fill">20</div>
		</div>
	</body>
	<script>
		window.onload=function (){
			var oFill = document.getElementById("fill");
			
			//oFill.style.width = ((1008/5000)*180)+"px";
			oFill.innerHTML = ((1008/5000)*100)+"%";
			startMove(oFill,'width',(1008/5000)*180);
		}
		
		function getStyle(obj, name)
		{
			if(obj.currentStyle)
			{
				return obj.currentStyle[name];
			}
			else
			{
				return getComputedStyle(obj, false)[name];
			}
		}

		function startMove(obj, attr, iTarget)
		{
			clearInterval(obj.timer);
			obj.timer=setInterval(function (){
				var cur=0;
				
				var speed=(iTarget-cur)/6;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				
				if(cur==iTarget)
				{
					clearInterval(obj.timer);
				}
				else
				{
					obj.style[attr]=cur+speed+'px';
				}
			}, 30);
		}
	</script>
</html>